<template>
  <div class="component-container">
    <div class="component-title-wrapper">
      <div class="component-title">
        <span class="title-breadcrumb">用户反馈</span>
      </div>
    </div>
    <div class="component-body">
      <div class="search-bar">
        <div class="date-wrapper">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="请选择反馈起始日期" v-model="searchData.start" value-format="timestamp" :clearable="false" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker placeholder="请选择反馈截止日期" v-model="searchData.end" value-format="timestamp" :clearable="false" style="width: 100%;"></el-date-picker>
          </el-col>
        </div>
        <span>
          <el-button plain @click="getFeedbackList(true)">搜索</el-button>
        </span>
      </div>
      <div>
        <el-table :data="feedbackList" style="width: 100%" border v-loading="loadingFeedbackList">
          <el-table-column label="序号" type="index" width="55"></el-table-column>
          <el-table-column label="用户邮箱" prop="email" min-width="150"></el-table-column>
          <el-table-column label="反馈内容" :show-overflow-tooltip="true" prop="content" min-width="200"></el-table-column>
          <el-table-column label="图片" width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.image_ids" style="padding: 0;" @click="viewImage(scope.row.image_ids)">查看</el-button>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="反馈时间" prop="updated_at" width="180"></el-table-column>
          <el-table-column label="操作" width="100" v-if="haslimit" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="showEmail(scope.row)" style="padding: 0;" v-if="scope.row.email">回复邮件</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 20px 0; text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageConfig.pageIndex"
            :page-sizes="[10, 15, 20]"
            :page-size="pageConfig.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageConfig.totalCount">
          </el-pagination>
        </div>
      </div>
      <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
    </div>
    <Email ref="email" />
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import Email from '../email/Email'
export default {
  name: '',
  data () {
    return {
      showViewer: false,
      srcList: [],
      searchData: {
        start: '',
        end: '',
      },
      feedbackList: [],
      pageConfig: {
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0,
        totalPage: 0
      },
      loadingFeedbackList: true,
    };
  },
  components: { ElImageViewer, Email },
  mixins: [dingMixin],
  computed: {
    haslimit() {
      return this.userInfo.roleIdList && (this.userInfo.roleIdList.includes('1311210362356432897') || this.userInfo.roleIdList.includes('1328502655740379138'))
    },
  },
  mounted () {
    this.getSearchTime();
    this.getFeedbackList(true);
  },
  methods: {
    //获取查询起始日期时间戳
    getSearchTime() {
      let date = new Date();
      let year = date.getFullYear();
      let mouth = date.getMonth() + 1;
      let day = date.getDate();
      let today = year + '-' + mouth + '-' + day;
      let lastYearToday = (year-1) + '-' + mouth + '-' + day;
      this.searchData.start = new Date(lastYearToday).getTime();
      this.searchData.end = new Date(today).getTime();
    },
    async getFeedbackList(init) {
      this.loadingFeedbackList = true;
      if(init) this.pageConfig.pageIndex = 1;
      if(!this.searchData.start) return this.$message.error('请选择反馈起始日期')
      if(!this.searchData.end) return this.$message.error('请选择反馈起始日期')
      if (this.searchData.start > this.searchData.end) return this.$message.error("起始日期应小于或等于截止日期")
      let {data: res} = await this.$http.post('bms/feedback/list?pageNum='+this.pageConfig.pageIndex+'&pageSize='+this.pageConfig.pageSize+'&start='+this.searchData.start+'&end='+(this.searchData.end + 24*60*60*1000-1)+'&timezoneOffset=28800')
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      
      this.feedbackList = res.data.list
      this.loadingFeedbackList = false;
      if(init) {
        this.pageConfig.totalPage = res.data.pages;
        this.pageConfig.totalCount = Number(res.data.total);
      }
    },
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getFeedbackList(true);
    },
    handleCurrentChange(val) {
      this.pageConfig.pageIndex = val;
      this.getFeedbackList();
    },
    viewImage(ids) {
      this.srcList = [];
      let idsArr = ids.split(',');
      idsArr.forEach( item => this.getImage(item) );
      this.showViewer = true;
    },
    async getImage(id) {
      let { data: res } = await this.$http.post( "bms/image?id="+id );
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.srcList.push(res.data.url)
    },
    closeViewer() {
      this.showViewer = false;
    },
    showEmail(row) {
      this.$refs.email.openEmail({
        subject: '回复反馈：',
        content: `
          <div style="clear:both;"><br /><br /><br /></div>
          <div style="font-size:12.0px;font-family:Arial Narrow;padding:2.0px 0 2.0px 0;">------------------------------------------</div>
          <div style="clear:both;">${row.content}</div>
        `,
        fileIds: '',
        filesArr: [],
      }, row.email, 'answer');
    }
  }
}
</script>

<style lang='scss' scoped>
.component-container {
  min-width: 1000px;
  height: calc(100vh - 50px);
  color: #333333;
  .component-title-wrapper {
    padding: 0 16px;
    .component-title {
      font-size: 12px;
      color: rgb(102, 102, 102);
      padding: 20px 0;
      border-bottom: 1px solid #ecedee;
      position: relative;
      .title-breadcrumb {
        font-weight: bolder;
        font-size: 16px;
        padding: 0 10px;
        font-weight: bolder;
        display: inline-block;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          width: 4px;
          height: 20px;
          margin-top: -10px;
          background: #0070cc;
        }
      }
      .condition-right {
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
  }
  .component-body {
    padding: 16px 16px 48px;
    .search-bar {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .date-wrapper {
        margin-right: 20px;
        width: 480px;
        text-align: center;
        line-height: 36px;
      }
    }
  }
}
.dialog-style /deep/ .el-dialog__body {
  padding: 0;
  .el-table td, .el-table th {
    padding: 6px 0;
  }
}
</style>